<template>
    <el-dialog
        title="修改手机号"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        @closed="resetForm"
        append-to-body>
        <el-form :model="rechargeForm" :rules="rechargeRules" ref="rechargeFormRef" label-width="100px" size="small">
            <el-form-item label="用户ID">
                <el-input :value="currentUserId" disabled/>
            </el-form-item>
            <el-form-item label="原手机号">
                <el-input :value="currentUsername" disabled/>
            </el-form-item>
            <el-form-item label="新手机号" prop="tel">
                <el-input v-model="rechargeForm.tel"   maxlength="11"
                                 placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog" size="small">取消</el-button>
            <el-button type="primary" @click="submitRecharge" size="small">确定修改</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {mapState} from "vuex";
const phoneRegex = /^1[3-9]\d{9}$/;

export default {
    data() {
        return {
            dialogVisible: false,
            currentUserId: null,
            currentUsername: '',
            rechargeForm: {
                tel: undefined,
            },

            rechargeRules: {
                tel: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (phoneRegex.test(value)) {
                                callback();
                            } else {
                                callback(new Error('请输入有效的手机号码'));
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState(["userInfo"]),
    },

    methods: {
        openDialog(userData) {
            this.currentUserId = userData.id;
            this.currentUsername = userData.username;
            this.dialogVisible = true;
        },
        closeDialog() {
            this.dialogVisible = false;
        },
        resetForm() {
            this.$refs.rechargeFormRef?.resetFields();
            this.currentUserId = null;
            this.currentUsername = '';
        },

        submitRecharge() {
            this.$refs.rechargeFormRef.validate((valid) => {
                if (valid) {
                    this.$confirm('您确定要为该用户修改手机号吗？', '确认修改', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const apiData = {
                            id: this.currentUserId,
                            tel: this.rechargeForm.tel,
                        };
                        this.$http.post('/admin/User/setUserTel', apiData)
                            .then(result => {
                                if (result.code === 200) {
                                    this.$message.success(result.msg);
                                    this.$emit('recharge-success');
                                    this.closeDialog();
                                } else {
                                    this.$message.error(result.msg);
                                }
                            })
                            .catch(error => {
                                console.error('Recharge API error:', error);
                                this.$message.error('请求失败，请稍后重试');
                            });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消修改'
                        });
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.proof-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.proof-uploader .el-upload:hover {
    border-color: #409EFF;
}

.proof-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.proof-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dialog-footer {
    text-align: right;
}
/deep/.el-dialog__header{
    text-align: center !important;
}
</style>
